import classNames from 'classnames';
import { useRef, useState } from 'react';
import { YmReactDnd } from 'ym-design';
import './card.less';
const { useDrag, useDrop } = YmReactDnd;

type indexDetail = { dragIndex: number; hoverIndex: number };

interface CardProps {
  id: number;
  text: string;
  index: number;
  indexDetail: indexDetail;
  onMoveCard: (ragIndex: number, hoverIndex: number) => void;
  onRefreshIndexDetail: (newIndexDetail: indexDetail) => void;
}

interface DragItem {
  id: number;
  index: number;
}

interface CollectValues {
  isDragging: boolean;
}

function Card(props: CardProps) {
  const { id, text, index, onMoveCard, indexDetail, onRefreshIndexDetail } =
    props;
  const [isCanDrag, setIsCanDrag] = useState<boolean>(true);
  const dragRef = useRef<HTMLLIElement>(null);

  const [{}] = useDrop<DragItem, any, any>(
    {
      accept: 'card',
      dropNode: dragRef.current,
      collect(monitor) {
        return {};
      },
      hover(item, monitor) {
        if (!dragRef.current) {
          return;
        }
        const dragIndex = item.index;
        const hoverIndex = index;
        const hoverBoundingRect = dragRef.current?.getBoundingClientRect();
        const hoverMiddleY =
          (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2; //高度/2
        const clientOffset = monitor.getClientOffset();
        const hoverDiffy = clientOffset!.y - hoverBoundingRect.top;

        // console.log('--Card--hover--dragIndex--hoverIndex--dragRef--:', dragIndex, hoverIndex, dragRef.current.innerHTML);
        // console.log('--Card--hover--item--parentName--:', item, parentName);

        if (dragIndex === hoverIndex) {
          onRefreshIndexDetail({ dragIndex: -1, hoverIndex: -1 });
          return;
        }

        // Dragging down
        if (dragIndex < hoverIndex && hoverDiffy < hoverMiddleY) {
          return;
        }
        // Dragging upwards
        if (dragIndex > hoverIndex && hoverDiffy > hoverMiddleY) {
          return;
        }

        onRefreshIndexDetail({ dragIndex, hoverIndex });
      },
      //不一定能执行
      drop(item, monitor) {
        console.log('--Card--drop--indexDetail--:', indexDetail, item);
        if (indexDetail.dragIndex !== -1 && indexDetail.hoverIndex !== -1) {
          onMoveCard(indexDetail.dragIndex, indexDetail.hoverIndex);
          onRefreshIndexDetail({ dragIndex: -1, hoverIndex: -1 });
        }
      },
    },
    [index, dragRef.current, indexDetail],
  );

  const [{ isDragging }] = useDrag<DragItem, any, CollectValues>(
    {
      type: 'card',
      dragNode: dragRef.current,
      canDrag: isCanDrag,
      item: {
        id,
        index,
      },
      collect: (monitor) => ({
        isDragging: monitor.isDragging(),
      }),
      end(item, monitor) {
        // console.log('--Card--dragEnd--item--:', item);
        onRefreshIndexDetail({ dragIndex: -1, hoverIndex: -1 });
      },
    },
    [index, dragRef.current, indexDetail],
  );
  // const opacity = isDragging ? 0.2 : 1;

  return (
    <li
      ref={dragRef}
      className={classNames('transfer-card', {
        active: indexDetail.hoverIndex === index,
      })}
      style={{ opacity: 1, cursor: isCanDrag ? 'move' : 'dafault' }}
    >
      {text}
    </li>
  );
}

export default Card;
